<template>
  <div class="devNumberCard_wrap">
    <div class="item item--1">
      <img
        class="card_img"
        src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/shebeizongshuliang.png"
        alt=""
      />
      <span class="quantity"> {{ devSumNumber }} </span>
      <span class="text text--1"> 设备总数 </span>
    </div>
    <div class="item item--3">
      <img
        class="card_img"
        src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/shebeizaixianshuliang.png"
        alt=""
      />
      <span class="quantity"> {{ devOnLineNumber }} </span>
      <span class="text text--3"> 在线数量 </span>
    </div>
    <div class="item item--2">
      <img
        class="card_img"
        src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/shebeilixianshuliang.png"
        alt=""
      />
      <span class="quantity"> {{ devOffLineNumber }} </span>
      <span class="text text--2"> 离线数量 </span>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'
  export default defineComponent({
    name: 'devNumberCard'
  })
</script>
<script lang="ts" setup>
  // 接收父组件传递的 props 数据
  const props = defineProps(['devSumNumber', 'devOnLineNumber', 'devOffLineNumber'])
</script>

<style lang="less" scoped>
  .devNumberCard_wrap {
    width: 330px;
    height: 126px;
    color: white;
    display: flex;
    // grid-template-columns: 1fr 1fr;
    // grid-template-rows: 1fr 1fr;
    // gap: 5px;
    flex-direction: row;
    overflow: visible;
  }

  .devNumberCard_wrap .item {
    margin: 0px 10px 0px 0px;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .item:hover {
    transform: scale(0.95);
    transition: all 0.3s;
  }

  .item svg {
    width: 40px;
    height: 40px;
    margin-bottom: 7px;
  }

  .item--1 {
    background: #c7c7ff;
  }

  .item--2 {
    background: #ffd8be;
  }

  .item--3 {
    background: #a9ecbf;
  }

  // .item--4 {
  //   background: #f3bbe1;
  // }

  .quantity {
    font-size: 25px;
    font-weight: 600;
  }

  .text {
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
  }

  // .text--1 {
  //   color: rgba(149, 149, 255, 1);
  // }

  // .text--2 {
  //   color: rgba(252, 161, 71, 1);
  // }

  // .text--3 {
  //   color: rgba(66, 193, 110, 1);
  // }
  .card_img {
    width: 35px;
  }
</style>
